{extend name="common/main"}

{block name="css"}
<!-- 本页面需要额外添加的css请在此处添加 -->
<link rel="stylesheet" href="/mobiled/css/user.css">
<script type="text/javascript" src="/mobiled/js/mobile.js" ></script>


{/block}

{block name="body"}
<body>
<header>
    <div class="tab_nav">
        <div class="header">
            <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"></a></div>
            <div class="h-mid">地址管理</div>
            <div class="h-right">
                <aside class="top_bar">
                    <div onClick="show_menu();$('#close_btn').addClass('hid');" id="show_more"><a href="javascript:;"></a> </div>
                </aside>
            </div>
        </div>
    </div>
</header>
{include file="common/goods_nav"/}
<div id="tbh5v0">

    <div class="addressmone">
        <form  method="post">
            <ul>
                <li>
                    <span>收货人姓名</span>
                    <input name="consignee" id="consignee" type="text" value="{notempty name='$data'}{$data.consignee}{/notempty}" maxlength="12" placeholder="收货人姓名"/>
                </li>
                <li id="dq" {empty name='$data'} style="display: none"{/empty}>
                    <span>地区</span>

                    <input name='region' value="{notempty name='$data'}{$data.region}{/notempty}" type="text" readonly="readonly" >

                </li>
                <li>
                    <span>详细地址</span>
                    <input type="text"  name="address" id="address" placeholder="详细地址" onBlur="address_onBlur()" maxlength="100" value="{notempty name='$data'}{$data.address}{/notempty}"/>
                    <div class="diz_window" style="font-size: 15px">
                        <ul>

                        </ul>
                    </div>
                    <input type="hidden" name="provinceName"  placeholder="省" value="{notempty name='$data'}{$data.provinceName}{/notempty}">
                    <input type="hidden" name="longitude"  placeholder="经度" value="{notempty name='$data'}{$data.longitude}{/notempty}">
                    <input type="hidden" name="latitude"  placeholder="纬度" value="{notempty name='$data'}{$data.latitude}{/notempty}">

                </li>

                <li>
                    <span>手机</span>
                    <input type="text" id="mobile" name="mobile" value="{notempty name='$data'}{$data.mobile}{/notempty}" onpaste="this.value=this.value.replace(/[^\d-]/g,'')" onKeyUp="this.value=this.value.replace(/[^\d-]/g,'')" maxlength="11" placeholder="手机号码"/>
                </li>
                <li>
                    <span>邮政编码</span>
                    <input type="text" id="zipcode" name="zipcode" value="{notempty name='$data'}{$data.zipcode}{/notempty}" onpaste="this.value=this.value.replace(/[^\d]/g,'')" onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" maxlength="10"  placeholder="邮政编码"/>
                </li>
            </ul>
            <div style=" height:50px"></div>
            <div class="dotm_btn">

                {notempty name='$data'}
                <input type="hidden"  name="address_id"   value="{$data.address_id}" />

                <a href="javascript:void(0);" onclick="del({$data.address_id})" class="dotm_btn2">删除</a>
                <a href="{:Url('set_default')}?id={$data.address_id}" class="dotm_btn3" style=" color:#FFF;">设置为默认地址</a>
                {/notempty}

                <input type="button"  value="保存" class="dotm_btn1"  onclick="checkForm()" />
            </div>
        </form>
    </div>        </div>
</body>
{/block}

{block name="js"}
<!-- 本页面需要额外添加的js请在此处添加 -->
<script src="/layer/layer.js"></script>
<script>
    //点击地址输入框
    function address_onfocus() {

    }
    $(function () {
        $(document).on('input propertychange','[name="address"]', function() {
            search2();
        });
        $(document).on('input focus','[name="mobile"]', function() {
            $(".diz_window ul").html('');
        });
    });
    //离开地址输入框时自动选择第一个
    // function address_onBlur() {
    //     $(".diz_window ul").html('');
    //     // $('.diz_window ul').find("li:first-child").trigger("click");
    // }
    //搜索地址和经纬度
    function search2(){
        var formData=[];

        formData['keywords']=$('[name="address"]').val();
        $.ajax({
            url:"https://addr.vmall.com/data/searchByKeywords.json",
            type:'GET',
            data:{'keywords':formData['keywords']},
            dataType:'jsonp',
            success:function(res){
                // if (res.success==false){
                //     layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                // }
                // if (res.data.length<1){
                //     return false
                // }
                var html='';
                $.each(res.data,function ($k,$v) {
                    html+=' <li style="padding-top: 10px" onclick="select_site(\''+$v.name+'\',\''+$v.provinceName+$v.cityName+$v.distinctName+'\',\''+$v.location+'\',\''+$v.provinceName+'\')">\n' +
                        ' '+$v.provinceName+$v.cityName+$v.distinctName+$v.name+'\n' +
                        // '      <button type="button" class="am-btn am-btn-danger am-btn-xs" onclick="select_site(\''+$v.provinceName+$v.cityName+$v.distinctName+$v.name+'\',\''+$v.location+'\',\''+$v.provinceName+'\')">选择</button>\n' +

                        '  </li>';
                    $(".diz_window ul").html(html)
                })
            }
        });
    }
    //选择地址
    function select_site($dz,$dq,$location,$provinceName) {

        $(".diz_window ul").html('');

        var arr = $location.split(',');
        $('[name="address"]').val($dz);  //地址
        $('[name="region"]').val($dq);  //地区
        $('[name="provinceName"]').val($provinceName);
        $('[name="longitude"]').val(arr[0]);
        $('[name="latitude"]').val(arr[1]);
        $('#dq').css('display','block')

    }
    //申请提交
    function checkForm(){
        var param = new Object();
        $("input[name]").each(function(k, v){
            v = $(v);

            param[v.attr("name")] = v.val();
            console.log(param[v.attr("name")]);

        });
        console.log(param);

        if(param['consignee'] == '') {
            layer.msg('收货人不能为空', {icon: 2,time:1000});
            return false;
        }
        if(param['address'] == '') {
            layer.msg('请填写地址', {icon: 2,time:1000});
            return false;
        }
        if (param['latitude']==''|| param['latitude']=='0'){
            layer.msg('请填写有效地址', {icon: 2,time:1000});
            return false;
        }
        if(!checkMobile(param['mobile'])) {
            layer.msg('手机号码格式有误', {icon: 2,time:1000});
            return false;
        }
        $.post("{:Url('add_address')}",param, function(ret){
            if(ret.code != 200){
                layer.msg(ret.msg, {icon: 2});
                return false;
            }
            layer.msg(ret.msg, {icon: 1,time:2000},function(){
                location.href="{:url('User/address_list')}";
            });
        });
    }

    //删除
    function del(id){


            layer.confirm("确认删除？", {btn: ["确认","取消"], shade: 0.5}, function(){
                // 删除权限
                $.post("{:url('del_address')}", {id: id}, function(res) {
                    if (res.code != 200) {
                        layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 2});
                        return false;
                    }

                    layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 1}, function () {
                        layer.closeAll('page');

                        window.location.href="{:url('address_list')}"; //返回上一个页面并刷新
                        // location.reload();
                    });
                });
                // window.location.href=document.referrer; //返回上一个页面并刷新
            });



    }
//    function checkForm(){
//        var consignee = $('input[name="consignee"]').val();
//        var province = $('select[name="province"]').find('option:selected').val();
//        var city = $('select[name="city"]').find('option:selected').val();
//        var district = $('select[name="district"]').find('option:selected').val();
//        var address = $('input[name="address"]').val();
//        var mobile = $('input[name="mobile"]').val();
//        var error = '';
//        if(consignee == ''){
//            error += '收货人不能为空 <br/>';
//        }
//        if(province==0){
//            error += '请选择省份 <br/>';
//        }
//        if(city==0){
//            error += '请选择城市 <br/>';
//        }
//        if(district==0){
//            error += '请选择区域 <br/>';
//        }
//        if(address == ''){
//            error += '请填写地址 <br/>';
//        }
//        if(!checkMobile(mobile)){
//            error += '手机号码格式有误 <br/>';
//        }
//        if(error){
//            layer.open({content:error,time:2});
//            return false;
//        }
//
//        return true;
//    }


    //省市县联动
    /**
     * 获取城市
     * @param t  省份select对象
     */
    //获得市内容
    function get_City(t){
        var param = new Object();
        //(省)父id
        param['parent_id']   = $("[name='province']").val();
        param['level']   = '2';
        $.post("{:url('getRegion')}", param, function (res) {
            res = '<option value="">选择市</option>'+res;
            $('[name="city"]').html(res);
        });

    }
    //获得县、区内容
    function get_district(t){
        var param = new Object();
        //(省)父id
        param['parent_id']   = $("[name='city']").val();
        param['level']   = '3';
        $.post("{:url('getRegion')}", param, function (res) {
            res = '<option value="">选择县、区</option>'+res;
            $('[name="district"]').html(res);
        });
    }
    function get_Twon(t) {
        var param = new Object();
        //(省)父id
        param['parent_id']   = $("[name='district']").val();
        param['level']   = '4';
        $.post("{:url('getRegion')}", param, function (res) {
            if(parseInt(res) == 0){
                $('#twon').empty().css('display','none');
            }else{
                $('#twon').css('display','block');
                res = '<option value="">选择街道、乡</option>'+res;
                $('[name="twon"]').html(res);
            }
        })
    }
</script>
{/block}
